<template>
    <div class="upload-image">
        <el-upload 
            :action="action" 
            :data="uploadData"
            list-type="picture-card"
            name="uploadFile"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview" 
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :limit="limit"
            :disabled="disabled"
            accept="image/*">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import baseURL from '@/utils/baseURL';
    import { deleteAtthById } from "@/service/core/dictionary";
    export default {
        name: 'uploadpic',
        props: {
            action: {
                type: String,
                default: '/api/api-sys/sys/atth/upload'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            limit: {
                type: Number
            },
            value: {
                type: Array,
                default() {
                    return []
                }
            },
            busiId: {
                type: String,
                default: ''
            },
            busiType: {
                type: String,
                default: 'image'
            }
        },
        components: {},
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token
            }),
            uploadData() {
                return {
                    token: this.token,
                    busiId: this.busiId,
                    busiType: this.busiType
                }
            },
            fileList: {
                get: function() {
                    return this.value
                },
                set: function(val) {
                    this.$emit('input', val)
                }
            }
        },
        methods: {
            handleSuccess(res, file) {
                if(res.code == 1000) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '上传成功！'
                    })
                    let data = {
                        ...res.data,
                        url: baseURL.fileURL + res.data.url
                    }
                    this.fileList.push(data);
                }
            },
            handleRemove(file, fileList) {
                const params = { ids: file.id };
                deleteAtthById(params).then(res => {
                    if (res.data.code == 1000) {
                        let index = this.fileList.findIndex(item => item.id == file.id);
                        if(index > -1) {
                            this.fileList.splice(index, 1);
                        }
                    }
                    this.$notify({
                        title: "提醒",
                        message: "附件删除成功",
                        type: "success"
                    });
                }).catch(err => {
                    this.$notify({
                        title: "提示",
                        type: "error",
                        message: "附件删除失败！"
                    })
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleExceed(file, fileList) {
                this.$notify({
                    title: '提示',
                    type: 'warning',
                    message: '超出最大上传数量！'
                })
            }
        },
    }

</script>
